<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>车辆派遣管理系统-登录</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="<%=basePath%>layui/css/layui.css">
    <style type="text/css">
        body {
            background-color: #393D49;
        }

        .divCenter {
            background: rgb(255, 255, 255);
            margin: 80px auto;
            padding-top: 20px; border : 1px solid rgb( 231, 231, 231);
            border-image: none;
            width: 400px;
            height: 350px;
            text-align: center;
            border: 1px solid rgb(231, 231, 231);
        }

        .login-title {
            font-size: 25px;
        }
    </style>
</head>

<body>

<fieldset class="layui-elem-field" style="color: red">
    <legend>项目说明</legend>
    <div class="layui-field-box">
        此项为2020年暑假学习成果展示演示项目，通过学习Java的开源SSM框架进行学习开发（前端使用的为开源框架layui）。功能较为简单，共分为三个模块，基础信息管理维护，业务模块及统计查询<br/>
        项目的源码整理后会上传至 码云 ，个人项目仓库中，地址 <a href="https://gitee.com/zcy5wpf/vdm/" target="_blank" style="text-decoration: red;color: red">https://gitee.com/zcy5wpf/vdm/</a>
    </div>
</fieldset>

<form class="layui-form" action="<%=basePath%>user/login" method="post">
    <div class="divCenter">
        <div class="layui-form-item login-title">车辆派遣管理系统-登录</div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" required lay-verify="required"
                       placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required
                       lay-verify="required" placeholder="请输入密码" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="code"  required lay-verify="required"
                       placeholder="请输入验证码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <img id="codeImg" title="点击获取新验证码"
                     src="<%=path%>/verifycode/getVerifyCodeImage"
                     onclick="changeimg()" width="62" height="28" alt=""
                     style="display:inline-block;">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formCommit">登录</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

        <div class="layui-form-item">
            <div  style="color: red;text-align: center;font-size: 18px;">
                此系统为2020暑期项目，使用SSM框架搭建，<br/>
                用户名:aa 密码: aa 可登录进行演示。
            </div>
        </div>
    </div>
</form>

<div class="layui-footer" style="text-align: center;font-weight: 300;line-height: 30px;padding-bottom: 15px;">
    <a href="http://www.beian.miit.gov.cn" target="_blank" style="color: white;text-decoration: none;padding-bottom: 15px;">豫ICP备16008300号</a>
</div>

</body>
</html>
<script src="<%=basePath%>layui/layui.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-3.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
    function changeimg() {
        var img = document.getElementById("codeImg");
        //防止页面缓存
        img.src = "<%=path%>/verifycode/getVerifyCodeImage" + "?r=" + Math.random();
    }
</script>
<script>
    //Demo
    layui.use('form', function() {
        var form = layui.form;

        //监听提交
        form.on('submit(formCommit)', function(data) {
            //提交验证

            /* layer.msg(JSON.stringify(data.field));
            return false; */
        });
    });
</script>